<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
      <el-form-item label="授权ID" prop="scopeId">
        <el-input v-model="formData.scopeId" placeholder="请输入授权ID" />
      </el-form-item>
      <el-form-item label="烈度" prop="intensity">
        <el-input v-model="formData.intensity" placeholder="请输入烈度" />
      </el-form-item>
      <el-form-item label="震级" prop="magnitude">
        <el-input v-model="formData.magnitude" placeholder="请输入震级" />
      </el-form-item>
      <el-form-item label="地区" prop="area">
        <!-- <el-checkbox-group v-model="formData.area">
          <el-checkbox label="请选择字典生成" />
        </el-checkbox-group> -->
        <el-row>
          <el-col :span="20">
            <el-text>{{ formData.area }}</el-text>
          </el-col>
          <el-col :span="1">
            <el-button @click="openProvinceDialog()">查看</el-button>
          </el-col>
        </el-row>
        <!-- <el-button @click="openCityDialog()">选 择</el-button> -->
      </el-form-item>
      <el-form-item label="关键字" prop="keywords">
        <el-input v-model="formData.keywords" placeholder="请输入关键字" />
      </el-form-item>
      <el-form-item label="坐标范围" prop="coordinates">
        <el-input v-model="formData.coordinates" placeholder="请输入坐标范围" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
  <!-- <CityDialog ref="cityDialog" /> -->
  <ProvinceDialog ref="provinceDialog" @onSelect="onSelectProvince" />
</template>
<script setup lang="ts">
import { StrategyApi, StrategyVO } from '@/api/forward/strategy'
import ProvinceDialog from './ProvinceDialog.vue'
import { isEmpty } from '@/utils/is'
// import { string } from 'vue-types'
// import { CityDialog } from '@/components/AreaList'

/** 发布策略 表单 */
defineOptions({ name: 'StrategyForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  scopeId: undefined,
  intensity: undefined,
  magnitude: undefined,
  area: '',
  keywords: undefined,
  coordinates: undefined,
})
const formRules = reactive({
  scopeId: [{ required: true, message: '授权ID不能为空', trigger: 'blur' }],
  intensity: [{ required: true, message: '烈度不能为空', trigger: 'blur' }],
  magnitude: [{ required: true, message: '震级不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await StrategyApi.getStrategy(id)
      console.log(formData.value)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as StrategyVO
    if (formType.value === 'create') {
      await StrategyApi.createStrategy(data)
      message.success(t('common.createSuccess'))
    } else {
      await StrategyApi.updateStrategy(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    scopeId: undefined,
    intensity: undefined,
    magnitude: undefined,
    area: '',
    keywords: undefined,
    coordinates: undefined,
  }
  formRef.value?.resetFields()
}

// const cityDialog = ref();

// const openCityDialog = () => {
//   cityDialog.value.openCityDialog(3)
// }

const provinceDialog = ref();

const openProvinceDialog = () => {
  let ret = isEmpty(formData.value.area)
  let provinces = ret ? [] : formData.value.area?.split(',')
  provinceDialog.value.open(provinces)
}

const onSelectProvince = (selected: Array<string>) => {
  let provinces = selected.toString()
  formData.value.area = provinces
}
</script>